<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 突袭简历</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/auth.css">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">
                    <span class="logo-text">突袭简历</span>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="templates.html">简历模板</a></li>
                    <li><a href="resume-editor.html">简历编辑</a></li>
                    <li><a href="resume-analysis.html">AI分析</a></li>
                    <li><a href="pricing.html">会员服务</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login active">登录</a>
                <a href="register.html" class="btn btn-primary">注册</a>
            </div>
            <button class="mobile-menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <main class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <h1>登录</h1>
                <p>欢迎回来，请登录您的账号</p>
            </div>
            <div class="auth-tabs">
                <button class="auth-tab active" data-tab="phone">手机号登录</button>
                <button class="auth-tab" data-tab="wechat">微信登录</button>
            </div>
            <div class="auth-content">
                <div class="auth-tab-content active" id="phone-tab">
                    <form id="login-form" class="auth-form">
                        <div class="form-group">
                            <label for="phone">手机号码</label>
                            <input type="tel" id="phone" name="phone" placeholder="请输入手机号码" required>
                        </div>
                        <div class="form-group">
                            <label for="sms-code">验证码</label>
                            <div class="sms-code-group">
                                <input type="text" id="sms-code" name="smsCode" placeholder="请输入验证码" required>
                                <button type="button" id="send-code-btn" class="btn btn-outline">获取验证码</button>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </form>
                    <div class="auth-links">
                        <span>没有账号？</span>
                        <a href="register.html">立即注册</a>
                    </div>
                </div>
                <div class="auth-tab-content" id="wechat-tab">
                    <div class="wechat-login">
                        <div class="qrcode-container">
                            <div class="qrcode-placeholder">📱 微信二维码</div>
                        </div>
                        <p>请使用微信扫描二维码登录</p>
                        <p class="qrcode-tip">扫码后请在微信中确认登录</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <div class="footer-logo">
                        <span class="logo-text">突袭简历</span>
                    </div>
                    <p>AI驱动的智能简历优化平台，助力求职者提升竞争力</p>
                    <div class="social-links">
                        <a href="#" aria-label="微信"><span>💬</span></a>
                        <a href="#" aria-label="微博"><span>📱</span></a>
                        <a href="#" aria-label="QQ"><span>🐧</span></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h4>产品服务</h4>
                    <ul>
                        <li><a href="templates.html">简历模板</a></li>
                        <li><a href="pricing.html">会员服务</a></li>
                        <li><a href="#">AI简历分析</a></li>
                        <li><a href="#">简历优化</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>学习资源</h4>
                    <ul>
                        <li><a href="resume-analysis.html">AI分析</a></li>
                        <li><a href="#">简历写作指南</a></li>
                        <li><a href="#">面试技巧</a></li>
                        <li><a href="#">行业洞察</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>关于我们</h4>
                    <ul>
                        <li><a href="#">公司介绍</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">加入我们</a></li>
                        <li><a href="#">用户协议</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>客户支持</h4>
                    <ul>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">意见反馈</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 突袭简历 版权所有</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script src="js/auth.js"></script>
</body>
</html>